import React, { Component, Suspense } from 'react'
import { Switch, Route } from 'react-router-dom'

const Index = React.lazy(() => import('../components/Index'))
const NotFound = React.lazy(() => import('../components/NotFound'))
const Redux = React.lazy(() => import('../components/Redux'))
const ClassCount = React.lazy(() => import('../components/ClassCount'))
const FnCount = React.lazy(() => import('../components/FnCount'))
const ClassTitle = React.lazy(() => import('../components/ClassTitle'))
const FnTitle = React.lazy(() => import('../components/FnTitle'))
const UseReducer = React.lazy(() => import('../components/UseReducer'))
const Interview = React.lazy(() => import('../components/Interview'))

export default class Router extends Component {
    render() {
        return (
            <Suspense fallback={<mark>loading...</mark>}>
                <Switch>
                    <Route path="/" exact component={Index}></Route>
                    <Route path="/redux" exact component={Redux}></Route>
                    <Route path="/classcount" exact component={ClassCount}></Route>
                    <Route path="/fncount" exact component={FnCount}></Route>
                    <Route path="/classtitle" exact component={ClassTitle}></Route>
                    <Route path="/fntitle" exact component={FnTitle}></Route>
                    <Route path="/usereducer" exact component={UseReducer}></Route>
                    <Route path="/interview" exact component={Interview}></Route>
                    <Route component={NotFound}></Route>
                </Switch>
            </Suspense>
        )
    }
}
